import {Button, Input, message, Modal, Select, Typography} from "antd";
import {useEffect, useState} from "react";
import TextArea from "antd/es/input/TextArea";
import RequestApis from "../../../apis/requestApis";
import RequestUtils from "../../../utils/requestUtils";
import {EditOutlined, InfoCircleOutlined} from "@ant-design/icons";

const {Option} = Select;
const {Title, Text} = Typography;

/**
 * 服务基本信息编辑模态框
 * @param props
 * @returns {JSX.Element}
 * @constructor
 */
const ServiceBasicEdit = (props) => {

    const {
        visible,
        setVisible,
        serviceDetail,
        searchServiceGovernanceById
    } = props;

    const [messageApi, contextHolder] = message.useMessage();

    // 服务基本信息（存储编辑后的值）
    const [serviceBasicInfo, setServiceBasicInfo] = useState({
        id: '',
        serviceTitle: '',
        serviceName: '',
        serviceDescription: '',
        projectManagerNickname: '',
        gitUrl: '',
        frontBackType: '', // 存储字符串形式的"0"或"1"
        serviceConfigFile: ''
    });

    useEffect(() => {
        // 初始化时从原始数据加载值
        setServiceBasicInfo({
            id: serviceDetail.id || '',
            serviceTitle: serviceDetail.serviceTitle || '',
            serviceName: serviceDetail.serviceName || '',
            serviceDescription: serviceDetail.serviceDescription || '',
            projectManagerNickname: serviceDetail.projectManagerNickname || '',
            gitUrl: serviceDetail.gitUrl || '',
            frontBackType: serviceDetail.frontBackType?.toString() || '', // 转为字符串适配Select
            serviceConfigFile: serviceDetail.serviceConfigFile || ''
        })
    }, [visible, serviceDetail]);

    /**
     * 根据id编辑服务治理信息
     */
    const editServiceGovernanceById = () => {
        RequestUtils.post(RequestApis.serviceGovernance.editById, {
            id: serviceDetail.id, // ID用原始值确保正确
            serviceTitle: serviceBasicInfo.serviceTitle,
            serviceName: serviceBasicInfo.serviceName,
            serviceDescription: serviceBasicInfo.serviceDescription,
            projectManagerNickname: serviceBasicInfo.projectManagerNickname,
            gitUrl: serviceBasicInfo.gitUrl,
            frontBackType: serviceBasicInfo.frontBackType,
            serviceConfigFile: serviceDetail.serviceConfigFile
        }).then(res => {
            searchServiceGovernanceById(); // 重新查询刷新数据
            messageApi.success('编辑服务基本信息成功');
            setVisible(false); // 关闭模态框
        }).catch(err => messageApi.error(err.message || '编辑失败'));
    }

    // 处理前后端类型选择变化
    const handleTypeChange = (value) => {
        setServiceBasicInfo({
            ...serviceBasicInfo,
            frontBackType: value // 存储"0"或"1"
        });
    };

    return (
        <Modal
            open={visible}
            title={
                <div style={{display: 'flex', alignItems: 'center', gap: '8px'}}>
                    <EditOutlined style={{color: '#1890ff', fontSize: '18px'}} />
                    <Title level={4} style={{margin: 0}}>编辑服务基本信息</Title>
                </div>
            }
            onCancel={() => setVisible(false)}
            width={860}
            footer={[
                <Button
                    key="submit"
                    type={"primary"}
                    onClick={() => editServiceGovernanceById()}
                    style={{
                        padding: '6px 24px',
                        fontSize: '14px',
                        borderRadius: '4px',
                        transition: 'all 0.2s ease'
                    }}
                    hoverStyle={{
                        opacity: 0.9,
                        transform: 'translateY(-1px)'
                    }}
                >
                    保存信息
                </Button>,
                <Button
                    key="cancel"
                    danger
                    style={{
                        marginLeft: "12px",
                        padding: '6px 24px',
                        fontSize: '14px',
                        borderRadius: '4px',
                        transition: 'all 0.2s ease'
                    }}
                    onClick={() => setVisible(false)}
                    hoverStyle={{
                        opacity: 0.9,
                        transform: 'translateY(-1px)'
                    }}
                >
                    取消
                </Button>
            ]}
            bodyStyle={{
                padding: '24px',
                backgroundColor: '#fafafa',
                borderRadius: '8px 8px 0 0'
            }}
            style={{
                borderRadius: '8px',
                overflow: 'hidden'
            }}
        >
            <div style={{fontSize: '14px'}}>
                {contextHolder}

                {/* 提示信息栏 */}
                <div style={{
                    display: 'flex',
                    alignItems: 'center',
                    gap: '8px',
                    padding: '10px 16px',
                    backgroundColor: 'rgba(24, 144, 255, 0.05)',
                    borderLeft: '3px solid #1890ff',
                    borderRadius: '4px',
                    marginBottom: '20px'
                }}>
                    <InfoCircleOutlined style={{color: '#1890ff', fontSize: '16px'}} />
                    <Text style={{color: '#4e5969', fontSize: '13px'}}>
                        请填写服务基本信息，带 <span style={{color: '#ff4d4f'}}>*</span> 为关键信息
                    </Text>
                </div>

                {/* 横向两列布局组 */}
                <div style={{display: 'flex', gap: '24px', marginBottom: '24px'}}>
                    {/* 服务标题 */}
                    <div style={{flex: 1, display: 'flex', flexDirection: 'column', gap: '8px'}}>
                        <div style={{
                            display: 'flex',
                            alignItems: 'center',
                            color: '#1f2329',
                            fontWeight: 500,
                            lineHeight: '1.5'
                        }}>
                            服务标题
                            <span style={{color: '#ff4d4f', marginLeft: '4px'}}>*</span>
                        </div>
                        <Input
                            value={serviceBasicInfo.serviceTitle}
                            onChange={(e) => {
                                setServiceBasicInfo({...serviceBasicInfo, serviceTitle: e.target.value})
                            }}
                            style={{
                                borderRadius: '4px',
                                border: '1px solid #dcdfe6',
                                height: '40px',
                                transition: 'all 0.2s ease'
                            }}
                            placeholder="请输入服务标题"
                            onFocus={(e) => {
                                e.currentTarget.style.borderColor = '#1890ff';
                                e.currentTarget.style.boxShadow = '0 0 0 2px rgba(24, 144, 255, 0.2)';
                            }}
                            onBlur={(e) => {
                                e.currentTarget.style.borderColor = '#dcdfe6';
                                e.currentTarget.style.boxShadow = 'none';
                            }}
                        />
                    </div>

                    {/* 服务名称 */}
                    <div style={{flex: 1, display: 'flex', flexDirection: 'column', gap: '8px'}}>
                        <div style={{
                            display: 'flex',
                            alignItems: 'center',
                            color: '#1f2329',
                            fontWeight: 500,
                            lineHeight: '1.5'
                        }}>
                            服务名称
                            <span style={{color: '#ff4d4f', marginLeft: '4px'}}>*</span>
                        </div>
                        <Input
                            value={serviceBasicInfo.serviceName}
                            onChange={(e) => {
                                setServiceBasicInfo({...serviceBasicInfo, serviceName: e.target.value})
                            }}
                            style={{
                                borderRadius: '4px',
                                border: '1px solid #dcdfe6',
                                height: '40px',
                                transition: 'all 0.2s ease',
                                fontFamily: 'SFMono-Regular, Consolas, monospace'
                            }}
                            placeholder="请输入服务名称"
                            onFocus={(e) => {
                                e.currentTarget.style.borderColor = '#1890ff';
                                e.currentTarget.style.boxShadow = '0 0 0 2px rgba(24, 144, 255, 0.2)';
                            }}
                            onBlur={(e) => {
                                e.currentTarget.style.borderColor = '#dcdfe6';
                                e.currentTarget.style.boxShadow = 'none';
                            }}
                        />
                    </div>
                </div>

                {/* 服务描述 */}
                <div style={{marginBottom: '24px', display: 'flex', flexDirection: 'column', gap: '8px'}}>
                    <div style={{
                        color: '#1f2329',
                        fontWeight: 500,
                        lineHeight: '1.5'
                    }}>
                        服务描述
                    </div>
                    <TextArea
                        rows={3}
                        value={serviceBasicInfo.serviceDescription}
                        onChange={(e) => {
                            setServiceBasicInfo({...serviceBasicInfo, serviceDescription: e.target.value})
                        }}
                        style={{
                            borderRadius: '4px',
                            border: '1px solid #dcdfe6',
                            transition: 'all 0.2s ease',
                            resize: 'vertical'
                        }}
                        placeholder="请输入服务描述信息"
                        onFocus={(e) => {
                            e.currentTarget.style.borderColor = '#1890ff';
                            e.currentTarget.style.boxShadow = '0 0 0 2px rgba(24, 144, 255, 0.2)';
                        }}
                        onBlur={(e) => {
                            e.currentTarget.style.borderColor = '#dcdfe6';
                            e.currentTarget.style.boxShadow = 'none';
                        }}
                    />
                </div>

                {/* 横向两列布局组 */}
                <div style={{display: 'flex', gap: '24px', marginBottom: '24px'}}>
                    {/* 前后端类型 */}
                    <div style={{flex: 1, display: 'flex', flexDirection: 'column', gap: '8px'}}>
                        <div style={{
                            display: 'flex',
                            alignItems: 'center',
                            color: '#1f2329',
                            fontWeight: 500,
                            lineHeight: '1.5'
                        }}>
                            前后端类型
                            <span style={{color: '#ff4d4f', marginLeft: '4px'}}>*</span>
                        </div>
                        <Select
                            value={serviceBasicInfo.frontBackType}
                            onChange={handleTypeChange}
                            style={{
                                borderRadius: '4px',
                                border: '1px solid #dcdfe6',
                                height: '40px',
                                transition: 'all 0.2s ease'
                            }}
                            placeholder="请选择服务类型"
                            allowClear
                            onFocus={(e) => {
                                e.currentTarget.style.borderColor = '#1890ff';
                                e.currentTarget.style.boxShadow = '0 0 0 2px rgba(24, 144, 255, 0.2)';
                            }}
                            onBlur={(e) => {
                                e.currentTarget.style.borderColor = '#dcdfe6';
                                e.currentTarget.style.boxShadow = 'none';
                            }}
                        >
                            <Option value="0">前端</Option>
                            <Option value="1">后端</Option>
                        </Select>
                    </div>

                    {/* 项目管理员 */}
                    <div style={{flex: 1, display: 'flex', flexDirection: 'column', gap: '8px'}}>
                        <div style={{
                            color: '#1f2329',
                            fontWeight: 500,
                            lineHeight: '1.5'
                        }}>
                            项目管理员昵称
                        </div>
                        <Input
                            value={serviceBasicInfo.projectManagerNickname}
                            onChange={(e) => {
                                setServiceBasicInfo({...serviceBasicInfo, projectManagerNickname: e.target.value})
                            }}
                            style={{
                                borderRadius: '4px',
                                border: '1px solid #dcdfe6',
                                height: '40px',
                                transition: 'all 0.2s ease'
                            }}
                            placeholder="请输入管理员昵称"
                            onFocus={(e) => {
                                e.currentTarget.style.borderColor = '#1890ff';
                                e.currentTarget.style.boxShadow = '0 0 0 2px rgba(24, 144, 255, 0.2)';
                            }}
                            onBlur={(e) => {
                                e.currentTarget.style.borderColor = '#dcdfe6';
                                e.currentTarget.style.boxShadow = 'none';
                            }}
                        />
                    </div>
                </div>

                {/* git仓库地址 */}
                <div style={{marginBottom: '12px', display: 'flex', flexDirection: 'column', gap: '8px'}}>
                    <div style={{
                        color: '#1f2329',
                        fontWeight: 500,
                        lineHeight: '1.5'
                    }}>
                        git仓库地址
                    </div>
                    <Input
                        value={serviceBasicInfo.gitUrl}
                        onChange={(e) => {
                            setServiceBasicInfo({...serviceBasicInfo, gitUrl: e.target.value})
                        }}
                        style={{
                            borderRadius: '4px',
                            border: '1px solid #dcdfe6',
                            height: '40px',
                            transition: 'all 0.2s ease'
                        }}
                        placeholder="请输入git仓库地址（如：https://github.com/example/repo）"
                        onFocus={(e) => {
                            e.currentTarget.style.borderColor = '#1890ff';
                            e.currentTarget.style.boxShadow = '0 0 0 2px rgba(24, 144, 255, 0.2)';
                        }}
                        onBlur={(e) => {
                            e.currentTarget.style.borderColor = '#dcdfe6';
                            e.currentTarget.style.boxShadow = 'none';
                        }}
                    />
                </div>

            </div>
        </Modal>
    )
}

export default ServiceBasicEdit;